import React, { useEffect } from 'react';
import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  LinearProgress,
  Alert,
} from '@mui/material';
import {
  Computer as ComputerIcon,
  Storage as StorageIcon,
  SettingsEthernet as ConnectionIcon,
} from '@mui/icons-material';
import { useConnectionStore } from '../../stores/connectionStore';
import { useThemeStore } from '../../stores/themeStore';

const Dashboard: React.FC = () => {
  const { connections, loading, error, fetchConnections } = useConnectionStore();
  const { isDark } = useThemeStore();

  useEffect(() => {
    fetchConnections();
  }, [fetchConnections]);

  const connectedConnections = connections.filter(conn => conn.connected);
  const totalConnections = connections.length;

  const StatCard: React.FC<{
    title: string;
    value: number | string;
    icon: React.ElementType;
    color: string;
  }> = ({ title, value, icon: Icon, color }) => (
    <Card
      sx={{
        height: '100%',
        bgcolor: isDark ? 'grey.900' : 'background.paper',
        border: '1px solid',
        borderColor: isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
        transition: 'all 0.3s ease',
        '&:hover': {
          transform: 'translateY(-2px)',
          boxShadow: isDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.1)',
        },
      }}
    >
      <CardContent>
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Box>
            <Typography
              color="text.secondary"
              gutterBottom
              variant="body2"
              component="div"
            >
              {title}
            </Typography>
            <Typography variant="h4" component="div" fontWeight="bold">
              {value}
            </Typography>
          </Box>
          <Icon sx={{ fontSize: 40, color }} />
        </Box>
      </CardContent>
    </Card>
  );

  if (loading) {
    return (
      <Box sx={{ width: '100%', mt: 2 }}>
        <LinearProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Alert severity="error" sx={{ mt: 2 }}>
        {error}
      </Alert>
    );
  }

  return (
    <Box>
      <Typography
        variant="h4"
        component="h1"
        gutterBottom
        fontWeight="bold"
        sx={{ mb: 4 }}
      >
        仪表盘
      </Typography>

      <Grid container spacing={3}>
        {/* 连接统计 */}
        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <StatCard
            title="总连接数"
            value={totalConnections}
            icon={ConnectionIcon}
            color="#7c4dff"
          />
        </Grid>

        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <StatCard
            title="已连接"
            value={connectedConnections.length}
            icon={ConnectionIcon}
            color="#00e676"
          />
        </Grid>

        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <StatCard
            title="虚拟机"
            value="0"
            icon={ComputerIcon}
            color="#2196f3"
          />
        </Grid>

        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <StatCard
            title="存储池"
            value="0"
            icon={StorageIcon}
            color="#ff9800"
          />
        </Grid>
      </Grid>

      {/* 连接状态列表 */}
      <Box sx={{ mt: 4 }}>
        <Typography variant="h6" gutterBottom fontWeight="600">
          连接状态
        </Typography>
        
        {connections.length === 0 ? (
          <Alert severity="info" sx={{ mt: 2 }}>
            暂无连接配置，请先添加连接
          </Alert>
        ) : (
          <Grid container spacing={2}>
            {connections.map((connection) => (
              <Grid size={{ xs: 12, sm: 6, md: 4 }} key={connection.name}>
                <Card
                  sx={{
                    bgcolor: isDark ? 'grey.900' : 'background.paper',
                    border: '1px solid',
                    borderColor: connection.connected
                      ? 'success.main'
                      : isDark
                      ? 'rgba(255, 255, 255, 0.12)'
                      : 'rgba(0, 0, 0, 0.12)',
                  }}
                >
                  <CardContent>
                    <Box display="flex" alignItems="center" gap={1}>
                      <Box
                        sx={{
                          width: 12,
                          height: 12,
                          borderRadius: '50%',
                          bgcolor: connection.connected ? 'success.main' : 'error.main',
                        }}
                      />
                      <Typography variant="subtitle1" fontWeight="600">
                        {connection.name}
                      </Typography>
                    </Box>
                    <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
                      {connection.uri}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      状态: {connection.connected ? '已连接' : '未连接'}
                    </Typography>
                    {connection.hostname && (
                      <Typography variant="body2" color="text.secondary">
                        主机: {connection.hostname}
                      </Typography>
                    )}
                  </CardContent>
                </Card>
              </Grid>
            ))}
          </Grid>
        )}
      </Box>
    </Box>
  );
};

export default Dashboard;